<template>
    <div class="comp-document-preview" :style="{ backgroundColor }" v-loading="loading">
        <div class="warn-text" v-if="showErrorMessage">
            当前文件不支持预览，请
            <span class="download" @click="download"> 下载 </span>
            查看
        </div>
        <div class="content" :class="{ txt: extraName === 'txt' }" ref="content"></div>
    </div>
</template>

<script>
import { renderAsync } from 'docx-preview'
import { downloadByUrl } from '@/utils/download'
import axios from 'axios'
export default {
    props: {
        resourceUrl: {
            type: String,
            required: true
        },

        fileName: String,

        backgroundColor: {
            type: String,
            default: '#FFF'
        }
    },
    data() {
        return {
            loading: false,
            showErrorMessage: false
        }
    },
    computed: {
        extraName() {
            const name = this.fileName
            const url = this.resourceUrl
            return name ? name.substr(name.lastIndexOf('.') + 1) : url.substr(url.lastIndexOf('.') + 1, url.lastIndexOf('?'))
        }
    },
    methods: {
        // 把blob使用encoding转换成text
        async fileReadText(bolb, encoding) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader()
                reader.onload = (e) => {
                    resolve(e.target.result)
                }
                reader.onerror = (e) => {
                    reject(e)
                }
                reader.readAsText(bolb, encoding)
            })
        },
        // 下载文件为blob格式
        async downloadFile(url) {
            const result = await axios({ method: 'get', responseType: 'blob', url })
            return result.data
        },
        // 预览文件
        async docxPreview(content, url) {
            const bolb = await this.downloadFile(url)
            renderAsync(bolb, content)
        },
        // pdf预览
        async pdfPreview(content, url) {
            const iframe = document.createElement('iframe')
            iframe.src = url
            iframe.width = '100%'
            iframe.height = '100%'
            iframe.style.border = 'none'
            content.appendChild(iframe)
        },
        // 文本预览
        async txtPreview(content, url) {
            const bolb = await this.downloadFile(url)
            const text = await this.fileReadText(bolb, 'UTF-8')
            content.innerText = text
        },
        // 下载文件
        async download() {
            downloadByUrl(this.resourceUrl, this.fileName)
        }
    },
    mounted() {
        // 文件变化重新预览
        this.$watch('resourceUrl', {
            async handler(val) {
                this.loading = true
                this.showErrorMessage = false
                this.$refs.content.innerHTML = ''
                try {
                    const content = this.$refs.content
                    await this[`${this.extraName.toLowerCase()}Preview`](content, val)
                } catch (e) {
                    this.showErrorMessage = true
                }
                this.loading = false
            },
            immediate: true
        })
    }
}
</script>
<style lang="scss" scoped>
.comp-document-preview {
    height: 100%;
    width: 100%;
    .warn-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        color: #333;
        .download {
            color: #1890ff;
            cursor: pointer;
        }
    }
    .content {
        height: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        overflow: auto;
        color: #333;
    }
    .txt {
        padding: 24px;
        font-size: 16px;
        line-height: 24px;
    }
}
</style>
